/* eslint-disable no-undef */
<template>
  <div class="register-container">
    <div class="background">
      <img src="@/assets/picture/section02.jpg" width="100%" height="100%" alt=""  />
    </div>
    <div class="table">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="Submit" >
            注册
          </van-button>
        </div>
      </van-form>
        <div style="margin: 16px;">
          <van-button round block type="warning" native-type="Submit" @click="toLogin">
            登录
          </van-button>
        </div>
    </div>
  </div>
</template>

<script>
// import { getReguserAPI } from '@/api/registerAPI.js'
import { Toast, Dialog } from 'vant'
import Qs from 'qs'
import request from '@/utils/request.js'
export default {
  components: {
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      password: '',
      username: ''
    }
  },
  methods: {
    onSubmit() {
      this.getReguser()
      // this.$router.push('/login')
    },
    toLogin() {
      this.$router.push('/login')
    },
    async getReguser() {
      const params = {
        username: this.username,
        password: this.password
      }
      const { data: res } = await request.post('/api/reguser', Qs.stringify(params))
      console.log(res)
      if (res.status === 0) {
        Dialog.alert({
          message: '注册成功，去登录吧'
        }).then(() => {
          // on close
          this.$router.push('/login')
        })
      } else {
        Toast(res.message)
      }
    }
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  padding: 20px 16px;
}
.table {
  padding: 40px;
  position: absolute;
  top:30%;
}
.register-container {
  height: 100%;
  .background {
    width: 100%;
    height: 100%;
    /**宽高100%是为了图片铺满屏幕 */
    z-index: -1;
    position: absolute;
}
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
